<template>
	<view class="content">
		<view class="swiper">
			<u-swiper
					:list="list2"
					keyName="image"
					showTitle
					:autoplay="true"
					circular
					@click="swiperClick"
			></u-swiper>
		</view>
		<custom-waterfalls-flow v-if="data.list.length > 0"  ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.desc}}</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
		<u-empty v-if="data.list.length <= 0"
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/car.png"
		>
		</u-empty>
	</view>
</template>

<script>
	// #ifdef VUE2
	export default {
		data() {
			return {
				list2: [{
				    image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				},{
				    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				    title: '身无彩凤双飞翼，心有灵犀一点通'
				},{
				    image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				data: {
					list: [{ image: 'https://via.placeholder.com/200x200.png/2878ff',hide:false, title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, 
					{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' }, 
					{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' }, 
					{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' }, 
					{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' }, 
					{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
				},
				column: 2
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.data.list[1].desc = 'hahah ';
			},3000)
		},
		methods: {
			
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				console.log('单项点击事件', item)
			},
			imageClick(item) {
				console.log('图片点击事件', item)
				this.$u.route({
					url: 'pages/chat/chat'
				});
			},
			swiperClick(item) {
				console.log('轮播图片点击事件', item)
			},
			
		}
	}
	// #endif
</script>
<style lang="scss" scoped>
 @import './home.scss'
</style>
